<template>
    <div class="diagram-sidebar">
        <div
            class="image-node"
            v-for="(item, index) of list"
            :key="index"
            @mousedown.stop.prevent="dragInNode(item.type)"
        >
            <img :src="item.imgUrl" alt="" srcset="" />
            <div>
                {{ item.name }}
            </div>
        </div>
        <div class="image-node" @mousedown.stop.prevent="dragInNode('bpmn:startEvent', '开始')">
            <div class="pattern-start"></div>
            <div>开始</div>
        </div>
        <div class="image-node" @mousedown.stop.prevent="dragInNode('bpmn:userTask', '审批')">
            <div class="pattern-user"></div>
            <div>审批</div>
        </div>
        <div
            class="image-node"
            @mousedown.stop.prevent="dragInNode('bpmn:serviceTask', '系统任务')"
        >
            <div class="pattern-user"></div>
            <div>系统</div>
        </div>

        <div
            class="image-node"
            @mousedown.stop.prevent="dragInNode('bpmn:exclusiveGateway', '条件')"
        >
            <div class="pattern-condition"></div>
            <div>条件</div>
        </div>
        <div class="image-node" @mousedown.stop.prevent="dragInNode('bpmn:endEvent', '结束')">
            <div class="pattern-end"></div>
            <div>结束</div>
        </div>
    </div>
</template>

<script>
// import IconCircle from './icon/Circle.vue'
import { List } from './node'

console.log('List', List)
export default {
    name: 'DiagramSidebar',
    data() {
        return {
            list: List.map((item) => {
                return {
                    type: item.type,
                    ...item.info
                }
            })
        }
    },
    methods: {
        dragInNode(type, text) {
            console.log('dragInNode', type)
            this.$emit('dragInNode', type, text)
        }
    }
    // components: {
    //   // IconCircle,
    // }
}
</script>

<style scoped>
.diagram-sidebar {
    user-select: none;
    text-align: center;
    overflow: auto;
}
.image-node {
    /* display: inline-block; */
    /* width: 50%; */
    margin: 20px 0;

    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    user-select: none;
}
.image-node img {
    max-width: 26px;
    max-height: 26px;
    user-select: none;
}
.image-node div {
    font-size: 12px;
    user-select: none;
}

.pattern-start,
.pattern-end,
.pattern-user,
.pattern-condition {
    margin: auto;
    width: 36px;
    height: 36px;
    cursor: grab;
    opacity: 0.99;
}
.pattern-start {
    background: url()
        center center no-repeat;
}
.pattern-end {
    background: url()
        center center no-repeat;
}
.pattern-user {
    background: url()
        center center no-repeat;
}
.pattern-condition {
    background: url()
        center center no-repeat;
}
</style>
